<template>
  <div class="staff" :style="{height:page_height+'px'}">
    <!--S导航tabs-->
    <cube-tab-bar id="tabs" ref="tabs" v-model="selected_tab" :data="tabs" :showSlider="true">
    </cube-tab-bar>
    <!--E导航tabs-->

    <!--S列表-->
    <cube-tab-panels v-model="selected_tab">
        <cube-tab-panel v-for="(item,index) in tabs" :label="item.label">
          <cube-scroll class="list-scroll" ref="listScroll" :style="{height:scroll_height+'px'}">
            <ul class="ul" v-if="item.list.length > 0">
              <li v-for="(itema,indexa) in item.list" @click="clickLi(indexa)">
                <img class="header" :src="itema.header" />
                <div class="other">
                  <p class="nickname">{{itema.nickname}}</p>
                  <p class="position" v-if="selected_tab == '员工列表'" @click.stop="clickPosition(indexa)">{{itema.position}}</p>
                </div>
              </li>
            </ul>
            <empty v-else>暂无数据</empty>
          </cube-scroll>
        </cube-tab-panel>
    </cube-tab-panels>
    <!--E列表-->

    <!--添加员工，显示二维码--><div class="right-control add-staff" @click="showHideQrcode"><i class="iconfont icontianjia"></i></div>
    <!--添加职位--><div class="right-control add-position"><router-link class="a" to="/position"><i class="iconfont iconzhiwei"></i></router-link></div>

    <!--S显示添加二维码-->
    <div id="add-qrcode" v-show="qrcode_show">
      <div class="add-qrcode">
        <img class="qrcode" :src="qrcode" />
        <h3>扫码可申请员工</h3>
        <h4 @click="showHideQrcode">X</h4>
      </div>
    </div>
    <!--E显示添加二维码-->

  </div>
</template>

<script>
import store from '../../store.js';
import common from '../../public/common.js';
import empty from '../../components/empty/Empty.vue';
export default {
  name: 'staff',   //员工管理
  data(){
    return {
      page_height:store.state.height,
      scroll_height:store.state.height,
      store_id:0,  //门店id
      position:[],  //门店职位
      uid:0,  //要操作的用户id
      //S顶部tabs
      selected_tab:'员工列表',
      tabs:[
        {
          label:'员工列表',
          list:[
            // {
            //   id:'1',  //用户id
            //   staff_id:0,   //员工id
            //   nickname:'醉解心语1',
            //   header:'http://a.hiphotos.baidu.com/image/h%3D300/sign=cb60c5d972f0f736c7fe4a013a54b382/f603918fa0ec08fa3139e00153ee3d6d55fbda5f.jpg',
            //   position:'职位名称'
            // }
          ]
        },
        {
          label:'申请列表',
          list:[
            // {
            //   id:'1',
            //   nickname:'醉解心语1',
            //   header:'http://a.hiphotos.baidu.com/image/h%3D300/sign=cb60c5d972f0f736c7fe4a013a54b382/f603918fa0ec08fa3139e00153ee3d6d55fbda5f.jpg',
            // },
          ],
        }
      ],
      //E顶部tabs
      //S添加员工二维码
      qrcode:'',  //二维码地址
      qrcode_show:false,  //添加二维码显示状态
    }
  },
  components:{
    empty
  },
  computed:{
    picker_position(){
      var temp_position = [];
      this.position.forEach((item)=>{
        temp_position.push({text:item.name,value:item.id});
      });
      return temp_position;
    }
  },
  created(){
    console.log('test');
    common.store()
            .then((res)=>{
              if(store.state.store.position_id != 0){
                if(!store.state.store.authority.includes('staff')){
                  this.$router.replace('/');
                  return;
                }
              }
              if(res) this.store_id = res.store_id;
            })
            .then(()=>{
              this.getAddQrcode(); //申请扫码二维码
            })
            .then(()=>{
              this.getStaffList();
            })
            .then(()=>{
              this.getApplyList();  //申请列表
            })
            .then(()=>{
              this.getPosition();  //门店所有职位
            })
            .catch(error=>console.log(error));
  },
  mounted(){
    this.$nextTick(()=>{
      setTimeout(()=>{
        this.page_height = document.documentElement.clientHeight;
        this.scroll_height = document.documentElement.clientHeight - this.$refs.tabs.$el.getBoundingClientRect().height;
      },100);
    });
  },
  destroyed(){
    clearInterval(store.state.staff_timer);
  },
  methods:{
    //显示申请二维码
    showHideQrcode(){
        this.qrcode_show = !this.qrcode_show;
    },
    //获取新增二维码
    getAddQrcode(){
      this.$http.post(sysinfo.url,Qs.stringify({
        pages:'storeStaff',
        doing:'getAddQrcode',
        store_id:this.store_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.qrcode = res.data.data+'?time='+Date.now();
                }
              })
              .catch(error=>console.log(error));
    },
    //获取员工列表
    getStaffList(){
      this.$http.post(sysinfo.url,Qs.stringify({
          pages:'storeStaff',
          doing:'li',
          store_id:this.store_id,
          uid:sysinfo.uid,
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.tabs[0].list = res.data.data;
                }else{
                  this.tabs[0].list = [];
                }
              })
              .catch(error=>console.log(error));
    },
    //获取申请列表
    getApplyList(){
      store.state.staff_timer = setInterval(()=>{
        this.$http.post(sysinfo.url,Qs.stringify({
          pages:'storeStaff',
          doing:'getApplyList',
          store_id:this.store_id
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    this.tabs[1].list = res.data.data;
                  }else{
                    this.tabs[1].list = [];
                  }
                })
                .catch(error=>console.log(error));
      },500)
    },
    //点击li
    clickLi(_index){
      if(this.selected_tab == '员工列表'){
        this.uid = this.tabs[0].list[_index].uid;
        this.$createActionSheet({
          title: '操作',
          data:[
            {
              content:'删除',
              value:'delete'
            }
          ],
          zIndex:400,
          onSelect:(item)=>{
            switch(item.value){
              case 'delete':
                this.deleteStaff(this.tabs[0].list[_index].id);
                break;
            }
          }
        }).show();
      }else{
        this.uid = this.tabs[1].list[_index].id;
        if(this.position.length <= 0){
          this.$createDialog({
            type: 'confirm',
            icon: 'cubeic-alert',
            content: '门店暂无职位，是否前往添加职位',
            confirmBtn: {
              text: '添加职位',
              active: true
            },
            onConfirm:()=>{
              this.$router.push('/position');
            }
          }).show();
          return;
        }
        this.$createPicker({
          title: '选择职位',
          data: [this.picker_position],
          onSelect:(item)=>{
            this.setStaff(item[0]);
          }
        }).show();
      }
    },
    //点击用户职位
    clickPosition(_index){
      this.uid = this.tabs[0].list[_index].uid;
      var position_id = this.tabs[0].list[_index].position_id;
      var staff_id = this.tabs[0].list[_index].id;
      var select_index = this.positionSelectIndex(position_id);
      this.$createPicker({
        title: '修改职位',
        data: [this.picker_position],
        selectedIndex:[select_index],
        onSelect:(item)=>{
          if(item[0] != position_id){
            this.changeStaff(item[0],staff_id);
          }
        }
      }).show();
    },
    //获取职位picker选中的下标
    positionSelectIndex(position_id){
      for(let i=0;i<this.picker_position.length;i++){
        if(this.picker_position[i].value == position_id){
          return i;
        }
      }
    },
    //获取门店职位
    getPosition(){
      this.$http.post(sysinfo.url,Qs.stringify({
        pages:'storePosition',
        doing:'li',
        store_id:this.store_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.position = res.data.data;
                }else{
                  this.position = [];
                }
              })
              .catch(error=>console.log(error));
    },
    //将指定用户设置为员工
    setStaff(position_id){
      this.$http.post(sysinfo.url,Qs.stringify({
        pages:'storeStaff',
        doing:'setStaff',
        data:{
          store_id:this.store_id,
          uid:this.uid,
          position_id
        }
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.$createToast({
                    txt: '设置成功',
                    type: 'txt'
                  }).show();
                  this.getStaffList();
                }else{
                  this.$createToast({
                    txt: res.data.err_msg,
                    type: 'txt'
                  }).show();
                }
              })
              .catch(error=>console.log(error));
    },
    //修改指定用户的职位
    changeStaff(position_id,staff_id){
      this.$http.post(sysinfo.url,Qs.stringify({
        pages:'storeStaff',
        doing:'changeStaff',
        position_id,
        staff_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.getStaffList();
                }else{
                  this.$createToast({
                    txt: res.data.err_msg,
                    type: 'txt'
                  }).show();
                }
              })
              .catch(error=>console.log(error));
    },
    //删除员工
    deleteStaff(staff_id){
      this.$http.post(sysinfo.url,Qs.stringify({
        pages:'storeStaff',
        doing:'delete',
        staff_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  this.getStaffList();
                }else{
                  this.$createToast({
                    txt: '操作失败',
                    type: 'txt'
                  }).show();
                }
              })
              .catch(error=>console.log(error));
    }
  }
}
</script>

<style scoped>
  #tabs{
    position:absolute;
    z-index:10;
    top:0;
    left:0;
    width:375px;
    height:40px;
    font-size:16px;
    background: #fff;
  }
  ul.ul{
    position:absolute;
    top:40px;
    padding:0 10px;
  }
  ul.ul li{
    height:80px;
    padding-top:10px;
    box-sizing: border-box;
    font-size:16px;
    border-bottom: 1px solid #eee;
  }
  ul.ul li img.header{
    display: block;
    float: left;
    width:60px;
    height:60px;
    border-radius: 30px;
  }
  ul.ul li .other{
    width:285px;
    height:60px;
    float: left;
    margin-left: 10px;
  }
  ul.ul li .nickname{
    margin: 5px 0 10px 0;
  }
  ul.ul li .position{
    border:1px solid #eee;
    display: inline-block;
    padding:3px 10px;
    font-size:15px;
    border-radius: 15px;
    color: #666;
  }
  .right-control{
    position: fixed;
    z-index: 10;
    bottom: 40px;
    right:20px;
    width:40px;
    height:40px;
    border-radius: 20px;
    background: #FC9153;
    color:#fff;
    text-align: center;
    line-height: 40px;
  }
  .right-control .a{
    display: block;
    width: 100%;
    height:100%;
    color:#fff;
  }
  .right-control i{
    font-size:35px;
  }
  .right-control.add-staff{
    bottom:100px;
  }
  .right-control.add-staff i{
    font-size: 30px;
  }
  #add-qrcode{
    position:fixed;
    z-index:20;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,0.7);
    color:#fff;
    font-size:16px;
    text-align: center;
  }
  #add-qrcode .add-qrcode{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    width: 100%;
  }
  #add-qrcode img.qrcode{
    display: block;
    margin: 0 auto 10px auto;
    width: 150px;
    height:150px;
  }
  #add-qrcode h4{
    width:50px;
    height:50px;
    line-height: 50px;
    font-size:20px;
    border-radius: 25px;
    border:1px solid #fff;
    margin:20px auto 0 auto;
  }
</style>
